<template>
    <page-container title="个人信息">
        <el-form 
            :model="form" 
            label-width="120px"
            class="profile-form"
            v-loading="loading"
        >
            <el-form-item label="用户名">
                <el-input v-model="form.username" disabled />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="form.fullName" placeholder="请输入你的姓名" />
            </el-form-item>
            
            <el-form-item label="邮箱">
                <el-input v-model="form.email" placeholder="请输入你的邮箱" />
            </el-form-item>
            
            <el-form-item label="手机号">
                <el-input v-model="form.phone" placeholder="请输入你的手机号" />
            </el-form-item>
            
            <el-form-item label="角色">
                <el-input v-model="form.role" disabled />
            </el-form-item>
            
            <el-form-item label="最后登录时间">
                <el-input v-model="form.lastLoginTime" disabled >
                    <template #default="{ row }">
                     {{ formatDateTime(row.lastLoginTime) }}
                 </template>    
                </el-input>
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" @click="saveAdmin">保存修改</el-button>
            </el-form-item>
        </el-form>
    </page-container>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getAdminByAdminId,updateAdminStatus } from '@/api/admin'
import { ElMessage } from 'element-plus'
import PageContainer from '@/components/PageContainer.vue'

const form = ref({})
const loading = ref(true)
const admin = JSON.parse(localStorage.getItem('admin'))
const loadAdminInfo = async () => {
    loading.value = true
    try {
        const res = await getAdminByAdminId(admin.adminId)
        console.log(res)
        if (res.code === 200) {
            form.value = res.data
           
        } else {
            ElMessage.error('获取个人信息失败')
        }
    } catch (error) {
        console.error('获取个人信息失败', error)
        ElMessage.error('获取个人信息失败' + error.message)
    } finally {
        loading.value = false
    }
}

const saveAdmin = async () => {
    try {
        loading.value = true
        const res = await updateAdminStatus(form.value)
        if (res.code === 200) {
            ElMessage.success('修改成功')
            await loadAdminInfo()  // 更新个人信息
        } else {
            ElMessage.error(res.message || '修改失败')
        }
    } catch (error) {
        console.error('修改失败', error)
        ElMessage.error('修改失败' + error.message)
    } finally {
        loading.value = false
    }
}

// 格式化日期时间
const formatDateTime = (dateStr) => {
    if (!dateStr) return '--'
    const date = new Date(dateStr)
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
    })
}

// 页面加载时获取个人信息
onMounted(() => {
    setTimeout(() => {
        loadAdminInfo()
    }, 1000)
})
</script>

<style scoped>
.profile-form {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: #f5f7fa;
}
</style>
